<template>
    <div id='myJoin'>
        <div class='msg-container'>
            <!--            筛选-->
            <div class='header-info'>
                <el-form :model='queryParams' @keydown.enter.prevent='queryHandler'>
                    <el-input v-model='queryParams.title' clearable placeholder='搜索比赛' @clear='clearHandler' />
                </el-form>
            </div>
            <!--            比赛列表-->
            <div v-if='competitionList.length' class='competition-list'>
                <div v-for='competition in competitionList' :key='competition.competitionId' class='competition-item'>
                    <!--        提交作品-->
                    <publishWorks
                        v-model='open' :init-form='form' :competitionId='competition.competitionId'
                        @success='successHandler' />
                    <img class='cover' :src='`/api${competition.cover}`' alt='cover'>
                    <div class='main-content'>
                        <div class='top'>
                            {{ competition?.title || '比赛标题' }}
                        </div>
                        <div class='bottom'>
                            <span
                                v-if='competitionAssertStatus(competition)==="未开始"' class='status'
                                style='color: rgba(64,158,255,1);'>比赛{{ competitionAssertStatus(competition)
                                }}</span>
                            <span
                                v-else-if='competitionAssertStatus(competition)==="进行中"' class='status'
                                style='color: rgba(245,108,108,1);'>比赛{{ competitionAssertStatus(competition)
                                }}</span>
                            <span
                                v-else-if='competitionAssertStatus(competition)==="已结束"'
                                class='status'
                                style='color: rgba(144,147,153,1);'>比赛{{ competitionAssertStatus(competition)
                                }}</span>
                            <template v-else></template>
                            <span
                                v-if='competition.isPublishWorks' class='status'
                                style='color:#67C23A;'>作品已提交</span>
                            <span v-else class='status'>作品待提交</span>
                        </div>
                    </div>
                    <div class='modal'>
                        <img
                            title='查看比赛'
                            src='@/assets/my/look.png'
                            alt='查看'
                            @click='$router.push(`/competitionDetail/${competition.competitionId}?judgeIds=${competition?.judgeIds}`)'>
                        <img
                            v-if='!competition.isPublishWorks' src='@/assets/my/edit.png' title='提交作品' alt='编辑'
                            @click='openPublishWorks(competition.competitionId)'>
                    </div>
                </div>
            </div>
            <div v-else-if='!queryParams.title&&!competitionList?.length' class='competitions empty'>
                暂无比赛
            </div>
            <div v-else-if='queryParams.title&&!competitionList?.length&&queried' class='competitions empty'>
                没有找到关键字[<span style='color: #E65D6E;'>{{ queryParams.title }}</span>]下的相关比赛
            </div>
            <div v-else class='competitions empty'>
                暂无比赛
            </div>
            <!--            分页-->
            <div class='pagination'>
                <pagination
                    v-show='total > 0'
                    v-model:limit='queryParams.pageSize'
                    v-model:page='queryParams.pageNum'
                    :total='total'
                    layout='total, prev, pager, next'
                    @pagination='getList'
                />
            </div>
        </div>


    </div>
</template>
<script setup lang='ts'>

import { competitionAssertStatus } from '@/utils/sk';
import { reactive, ref, toRefs } from 'vue';
import { myJoinCompetition } from '@/api/business/competition';
import { Competition } from '@/api/model/Competition';
import { getWorksByCompetitionId } from '@/api/business/works';
import publishWorks from '@/components/JhPublishWorks/index.vue';

const open = ref(false);
const total = ref(0);
const competitionList = ref<Competition[]>([]);
const queried = ref(false);

/*请求参数定义*/
const data = reactive({
    form: {},
    queryParams: { pageNum: 1, pageSize: 6, title: '' }
});
const { form, queryParams } = toRefs(data);
/*获取比赛列表*/
const getList = () => {
    myJoinCompetition(queryParams.value).then(res => {
        competitionList.value = res.rows;
        total.value = res.total;
    });
};
/*清除*/
const clearHandler = () => {
    queried.value = false;
    queryParams.value.title = '';
    queryParams.value.pageNum = 1;
    getList();
};

/*查询*/
const queryHandler = () => {
    queried.value = true;
    queryParams.value.pageNum = 1;
    getList();
};
/*作品提交成功的回调*/
const successHandler = () => {
    open.value = false;
    form.value = {};
    getList();
};
/*打开提交作品弹出层*/
const openPublishWorks = (competitionId: number | string) => {
    /*获取作品详细*/
    getWorksByCompetitionId(competitionId).then(res => {
        form.value = res.data;
        open.value = true;
    });
};
getList();
</script>
<style scoped lang='scss'>
.msg-container {
    border: 1px solid #efefef;
    padding: 20px;
    min-height: 500px;

    .header-info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        :deep(.el-input__wrapper) {
            box-shadow: none;
            background: #F2F6FC;
        }
    }

    .competition-list {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;

        .count-info {
            display: flex;
        }

        .top {
            @include ellipsisOption(2);
        }

        .bottom {
            display: flex;
            justify-content: space-between;

            .count {
                display: flex;

                img {
                    margin-right: 6px;
                }

                &:first-child {
                    margin-right: 20px;
                }
            }
        }

        .competition-item {
            background: #F2F6FC;
            border-radius: 4px;
            display: flex;
            width: calc(50% - 54px);
            margin-right: 108px;
            padding: 10px;
            margin-bottom: 10px;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;

            &:hover {
                box-shadow: var(--el-box-shadow);

                .modal {
                    opacity: 1;
                }
            }

            .modal {
                position: absolute;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                top: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all 0.3s;

                img {
                    width: 50px;
                    height: 50px;
                    margin: 0 10px;
                    cursor: pointer;
                }

            }

            &:hover {
                box-shadow: var(--el-box-shadow);
            }

            .status {
                font-size: 14px;
                font-weight: 400;
                color: #E6A23C;
            }

            &:nth-child(2n) {
                margin-right: 0;
            }

            .cover {
                width: 100px;
                height: 100px;
                border-radius: 4px;
            }
        }

        .main-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 6px 0;
            margin-left: 10px;
            flex: 1;
        }
    }
}
</style>
